<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="content-left">
                            <div class="content-picture">
                                <loadingImage :src="addPrefixHost(contentInfo.image)"/>
                            </div>
                        </div>
                        <div class="content-right">
                            <p class="topic">
                                <span>{{contentInfo.sentence}}</span>
                            </p>
                            <div class="option">
                                <div class="btn" v-for="(item,index) in state" @click="setOption(index,item)"
                                     :class="activeIndex===index&&'active'">{{item}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';

    export default {
        async fetch({isServer, redirect, store, params}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                state: [
                    "T",
                    "F"
                ],
                answerArr: [],
                correctArr: [],
                isUpdate: false,
                errorMessage: "",
                activeIndex: null,
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            setOption(index, item) {
                this.activeIndex = index;
                this.setAnswer({
                    answer: this.contentInfo && this.contentInfo.isRight === item ? true : false,
                    msg: this.contentInfo && this.contentInfo.isRight
                });
            },
            init() {
                this.$nextTick(_ => {
                    this.setAnswer({
                        answer: false,
                        msg: this.contentInfo && this.contentInfo.isRight
                    });
                })
            }
        },
        mounted() {
            this.init();
        },
        created() {
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    correctArr: [],
                    errorMessage: ""
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            },
        },
        computed: {
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle
            }),
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
            }
            .content-left, .content-right {
                display: inline-block;
                vertical-align: middle;
                margin: 0 30px;
            }
            .content-picture {
                width: 3.2rem;
                height: 2.2rem;
                background: url("~~assets/img/main_content/course/l3-picture-frame.png") center center no-repeat;
                background-size: 100% 100%;
                vertical-align: middle;
                img {
                    width: 2.7rem;
                    height: 1.75rem;
                    margin: 0.22rem 0 0 0.07rem;
                }
            }
            .topic {
                font-size: 30px;
                span {
                    display: block;
                    margin: .1rem 0;
                }
            }
            .option {
                margin-top: .8rem;
            }
            .btn {
                display: inline-block;
                vertical-align: top;
                width: .5rem;
                height: .5rem;
                line-height: .5rem;
                color: white;
                font-size: 30px;
                background: rgb(129, 30, 29);
                border-radius: 10px;
                box-shadow: -3px -3px 0px 0px #591113 inset;
                margin: .3rem;
                cursor: pointer;
                &.active {
                    background: linear-gradient(#901D1C 0, #D9151B 90%);
                }
            }
        }

    }

</style>
